<template>
	<a-modal title="出库情况" :width="1200" :visible="visible" :confirmLoading="confirmLoading" :footer="null" destroyOnClose
		@ok="handleSubmit" @cancel="handleCancel">

		<a-spin :spinning="confirmLoading">
			<a-form class="mb-2" :form="form" layout="inline">
				<a-form-item label="时间">
					<a-select mode="multiple" v-model="years" size="small" placeholder="请选择年份" style="width: 300px"
						@change="handleChangeYear">
						<a-select-option :disabled='item.disable' :value="item.value" v-for="item in yearList" :key="item.value">
							{{ item.label }}
						</a-select-option>
					</a-select>
				</a-form-item>
				<a-form-item>
					<a-button size="small" type="primary" @click="handleSubmit">查询</a-button>
					<!--              <a-button style="margin-left: 8px" @click="buildCharts">重置</a-button>-->
				</a-form-item>
			</a-form>

			<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
			<div ref="charts" id="main" style="width: 100%;height:400px;"></div>
		</a-spin>
	</a-modal>
</template>

<script>
// import {
// 	outStoreAnalysis,   //物料使用情况
// 	referenceStatistics //bom引用情况
// } from '@/api/modular/main/emsmaterial/emsMaterialManage'
import { outStoreAnalysis } from '@/api/modular/main/emsModel/emsModel'
export default {
	data() {
		return {
			labelCol: {
				xs: { span: 24 },
				sm: { span: 8 }
			},
			wrapperCol: {
				xs: { span: 24 },
				sm: { span: 15 }
			},
			labelColBlock: {
				xs: { span: 24 },
				sm: { span: 4 }
			},
			wrapperColBlock: {
				xs: { span: 24 },
				sm: { span: 18 }
			},
			visible: false,
			confirmLoading: false,
			form: this.$form.createForm(this),
			queryParam: {},
			years: [],
			yearList: [],
			record: {},
		}
	},
	methods: {
		show(record) {
			this.yearList = this.createYearList()
			console.log(record)
			this.visible = true
			this.record = record
			this.years = [String(new Date().getFullYear())]
			this.handleSubmit()
		},
		handleChangeYear(e) {
			this.years = e
		},

		handleSubmit() {
			outStoreAnalysis({
				materialId: this.record.materialId,
				times: this.years
			}).then(res => {
				this.buildCharts(res.data)
			})
		},
		handleCancel() {
			this.visible = false
			this.years = []
		},
		buildCharts(responseData) {
			// 基于准备好的dom，初始化echarts实例
			let myChart = echarts.init(document.getElementById('main'))


			let xData = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
			let yData = []
			// {
			// data1: [], //
			// data2: [], //
			// data3: [], //生产退库数量
			// data4: [], //发货退库数量
			// }
			// 如果图表有数据
			if (responseData) {
				yData = responseData.map((item) => {
					return {
						name: item.year,
						type: "bar",
						barGap: 0,
						data: item.month.map(val=> val.number),
					}
					// item.month.forEach(innerItem => {
					// 	yData.data1.push(innerItem.number)  //
					// yData.data2.push(innerItem.warehousingNumber) //
					// yData.data3.push(innerItem.scReturnNumber) //生产退库数量
					// yData.data4.push(innerItem.fhReturnNumber) //发货退库数量
					// })
				})
			}

			// 指定图表的配置项和数据
			let option = {
				color: ["#ffdf25", "#36a9ce", "#d0e17d", '#ff5555'],
				tooltip: {
					formatter: (p) => {						
						let str = ''
						p.forEach((item, idx) => {
							str += `${item.marker}${item.seriesName}: ${item.data}`
							switch (idx) {
								case 0:
									str += ' ';
									break;
								default:
									str += ' '
							}
							str += idx === p.length - 1 ? '' : '<br/>'
						})
						return str
					},
					trigger: "axis",

					axisPointer: {
						type: "shadow",
					},
				},
				grid: {
					left: "5%",
					right: "5%",
					bottom: "10%",
					top: "15%",
					containLabel: true,
				},
				calculable: true,
				xAxis: [
					{
						type: "category",
						axisTick: { show: false },
						data: xData
					},
				],
				yAxis: [
					{
						type: "value",
						name: ''
					},
				],
				series: yData,
			}
			// 使用刚指定的配置项和数据显示图表。
			option && myChart.setOption(option, true)
			// // 指定图表的配置项和数据
			// let option = {
			// 	color: ["#ffdf25", "#36a9ce",],
			// 	legend: { type: "plain" },
			// 	tooltip: {
			// 		trigger: "axis",
			// 		// axisPointer: {
			// 		//   type: "shadow",
			// 		// },
			// 	},
			// 	grid: {
			// 		left: "5%",
			// 		right: "5%",
			// 		bottom: "10%",
			// 		top: "15%",
			// 		containLabel: true,
			// 	},
			// 	calculable: true,
			// 	xAxis: [
			// 		{
			// 			type: "category",
			// 			axisTick: { show: false },
			// 			data: xData
			// 		},
			// 	],
			// 	yAxis: [
			// 		{
			// 			type: "value",
			// 			name: '单位：元'
			// 		},
			// 	],
			// 	series: [
			// 		{
			// 			name: '生产出库数量',
			// 			type: 'bar',
			// 			color: '#4a2188',
			// 			prop: 'discountingOne',
			// 			data: yData.data1
			// 		},
			// 		{
			// 			name: '采购入库数量',
			// 			type: 'bar',
			// 			color: '#4888df',
			// 			prop: 'discountingTwo',
			// 			data: yData.data2
			// 		},
			// 	],
			// }


			// // 使用刚指定的配置项和数据显示图表。
			// option && myChart.setOption(option, true)
			// myChart1.setOption(option1)
		}
	}
}
</script>